<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品购置明细 - 在线评测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        /* 主要内容样式 */
        .main-content {
            padding: 20px;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e8e8e8;
        }

        .page-title {
            font-size: 20px;
            font-weight: 500;
            color: #333;
        }

        .btn-group {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .btn-primary {
            background-color: #1890ff;
            color: #fff;
        }

        .btn-primary:hover {
            background-color: #40a9ff;
        }

        .btn-default {
            background-color: #f5f5f5;
            color: #333;
            border: 1px solid #d9d9d9;
        }

        .btn-default:hover {
            background-color: #e8e8e8;
        }

        /* 步骤导航 */
        .steps-container {
            display: flex;
            margin: 30px 0;
            position: relative;
        }

        .steps-container::before {
            content: '';
            position: absolute;
            top: 16px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #e8e8e8;
            z-index: 1;
        }

        .step {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .step-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #f5f5f5;
            border: 2px solid #e8e8e8;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 10px;
            font-weight: bold;
            color: #999;
        }

        .step.active .step-icon {
            background-color: #1890ff;
            border-color: #1890ff;
            color: #fff;
        }

        .step.completed .step-icon {
            background-color: #52c41a;
            border-color: #52c41a;
            color: #fff;
        }

        .step-title {
            font-size: 14px;
            color: #999;
            margin-top: 5px;
        }

        .step.active .step-title {
            color: #1890ff;
            font-weight: 500;
        }

        .step.completed .step-title {
            color: #52c41a;
        }

        /* 表单样式 */
        .form-container {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 20px;
        }

        .form-header {
            padding-bottom: 15px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .form-title {
            font-size: 18px;
            font-weight: 500;
            color: #333;
        }

        .form-actions {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 15px;
        }

        .form-actions .btn {
            min-width: 100px;
        }

        /* 产品购置明细表格样式 */
        .purchase-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .purchase-table th, 
        .purchase-table td {
            border: 1px solid #e8e8e8;
            padding: 12px 15px;
            text-align: center;
            vertical-align: middle;
        }
        
        .purchase-table th {
            background-color: #f5f7fa;
            font-weight: 500;
            color: #333;
            white-space: nowrap;
        }
        
        .purchase-table .amount-cell {
            text-align: right;
        }
        
        .purchase-input {
            width: 100%;
            padding: 5px 8px;
            border: none;
            border-radius: 0;
            background-color: transparent;
            text-align: center;
            outline: none;
        }
        
        .purchase-input:focus,
        .quantity-input:focus {
            box-shadow: none;
        }
        
        .purchase-input.text-right {
            text-align: right;
        }
        
        /* 是否国产下拉框样式 */
        select.purchase-input {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-color: transparent;
            padding: 5px 8px;
            border: none;
            cursor: pointer;
            text-align: center;
            width: 100%;
            min-width: 80px;
            font-size: 14px;
            box-sizing: border-box;
            height: 34px;
            overflow: visible;
        }
        
        /* 下拉框选项样式 */
        select.purchase-input option {
            padding: 8px;
            text-align: center;
            font-size: 14px;
        }

        /* 确保下拉框在打开时不被截断 */
        .purchase-table td {
            position: relative;
            overflow: visible;
        }
        
        /* 下拉框所在的单元格样式 */
        .purchase-table td:nth-child(7) {
            overflow: visible;
            z-index: 10;
            min-width: 90px;
        }
        
        /* 添加数量输入框样式 */
        .quantity-input {
            width: 100%;
            min-width: 70px;
            padding: 8px 12px;
            border: none;
            border-radius: 0;
            background-color: transparent;
            text-align: center;
            font-weight: bold;
            color: #1890ff;
            font-size: 16px;
            display: block;
            margin: 0 auto;
            outline: none;
        }
        
        /* 移除数量输入框的上下按钮 */
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type=number] {
            -moz-appearance: textfield;
        }
        
        .category-header {
            background-color: #e6f7ff;
            font-weight: bold;
            text-align: center;
        }
        
        .category-header td {
            text-align: center;
            vertical-align: middle;
        }
        
        .add-row-btn {
            margin: 10px 0;
            background-color: #f5f5f5;
            border: 1px dashed #d9d9d9;
            padding: 8px 0;
            width: 100%;
            text-align: center;
            cursor: pointer;
            color: #1890ff;
        }
        
        .add-row-btn:hover {
            background-color: #e6f7ff;
        }
        
        .add-category-row {
            display: block;
            width: 100%;
            padding: 6px 8px;
            text-align: center;
            background-color: #f0f8ff;
            border: 1px dashed #a9d6ff;
            cursor: pointer;
            color: #1890ff;
            font-size: 13px;
        }
        
        .add-category-row:hover {
            background-color: #e6f7ff;
        }
        
        .not-applicable-checkbox {
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #333;
        }

        /* 操作按钮样式 - 新样式 */
        .btn-add {
            width: 11.2px;
            height: 11.2px;
            display: inline-block;
            cursor: pointer;
            position: relative;
            vertical-align: middle;
            transition: all 0.2s;
            margin: 0 3px;
        }
        
        .btn-add::before, .btn-add::after {
            content: '';
            position: absolute;
            background-color: #1890ff; /* blue color */
            transition: all 0.2s;
        }
        
        .btn-add::before { /* horizontal bar */
            left: 0;
            top: 50%;
            width: 100%;
            height: 2.1px;
            margin-top: -1.05px;
        }

        .btn-add::after { /* vertical bar */
            top: 0;
            left: 50%;
            height: 100%;
            width: 2.1px;
            margin-left: -1.05px;
        }
        
        .btn-add:hover::before, .btn-add:hover::after {
            background-color: #40a9ff;
        }
        
        .btn-delete {
            background-color: #ff4d4f;
            width: 8.4px;
            height: 1.4px;
            display: inline-block;
            cursor: pointer;
            transition: all 0.2s;
            vertical-align: middle;
            margin: 0 3px;
        }
        
        .btn-delete:hover {
            opacity: 0.8;
        }
        
        .operation-cell {
            white-space: nowrap;
            text-align: center;
        }
        
        /* 添加类别按钮 */
        .btn-category-add {
            background-color: #1890ff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 15px auto;
            transition: all 0.3s;
        }
        
        .btn-category-add:hover {
            background-color: #40a9ff;
            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
        }
        
        .btn-category-add i {
            margin-right: 5px;
        }
        
        /* 模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none; /* 默认隐藏 */
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-content {
            background-color: #fff;
            padding: 25px;
            border-radius: 8px;
            width: 90%;
            max-width: 1000px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e8e8e8;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        
        .modal-header h2 {
            font-size: 18px;
            font-weight: 500;
        }
        
        .modal-close-btn {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #888;
            line-height: 1;
        }
        
        .preview-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        .preview-table th, .preview-table td {
            border: 1px solid #e8e8e8;
            padding: 10px 12px;
            text-align: center;
            vertical-align: middle;
        }
        
        .preview-table th {
            background-color: #f9f9f9;
            font-weight: 500;
            text-align: center;
        }
        
        .preview-table .amount-preview-cell {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="main-content">
        <!-- 步骤导航 -->
        <div class="steps-container">
            <div class="step completed">
                <div class="step-icon">1</div>
                <div class="step-title">基本信息</div>
            </div>
            <div class="step completed">
                <div class="step-icon">2</div>
                <div class="step-title">预算总表</div>
            </div>
            <div class="step active">
                <div class="step-icon">3</div>
                <div class="step-title">产品购置明细</div>
            </div>
            <div class="step">
                <div class="step-icon">4</div>
                <div class="step-title">软件开发明细</div>
            </div>
            <div class="step">
                <div class="step-icon">5</div>
                <div class="step-title">实施服务明细</div>
            </div>
            <div class="step">
                <div class="step-icon">6</div>
                <div class="step-title">市级政务云租用</div>
            </div>
        </div>

        <!-- 表单 -->
        <div class="form-container">
            <div class="form-header">
                <h2 class="form-title">产品购置明细表</h2>
                <div class="btn-group">
                    <button class="btn btn-default" id="previewBtn">
                        <i class="fas fa-eye"></i> 预览
                    </button>
                    <button class="btn btn-default" id="exportBtn">
                        <i class="fas fa-file-export"></i> 导出
                    </button>
                </div>
            </div>

            <form id="productPurchaseForm">
                <!-- 产品购置明细表格 -->
                <table class="purchase-table" id="purchaseTable">
                    <thead>
                        <tr>
                            <th style="width: 5%; text-align: center;">序号</th>
                            <th style="width: 13%; text-align: center;">产品名称</th>
                            <th style="width: 8%; text-align: center;">参考品牌</th>
                            <th style="width: 8%; text-align: center;">参考型号</th>
                            <th style="width: 10%; text-align: center;">配置要求</th>
                            <th style="width: 8%; text-align: center;">政府采购编号</th>
                            <th style="width: 10%; text-align: center;">是否国产</th>
                            <th style="width: 7%; text-align: center;">单价(万元)</th>
                            <th style="width: 8%; text-align: center;">数量</th>
                            <th style="width: 7%; text-align: center;">总计(万元)</th>
                            <th style="width: 8%; text-align: center;">备注</th>
                            <th style="width: 8%; text-align: center;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="category-header">
                            <td colspan="11">网络与安全硬件购置费</td>
                            <td>
                                <span class="btn-add" data-category="net_sec" data-category-name="网络与安全硬件购置费" title="添加"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td><input type="text" class="purchase-input" name="net_sec_name_1"></td>
                            <td><input type="text" class="purchase-input" name="net_sec_brand_1"></td>
                            <td><input type="text" class="purchase-input" name="net_sec_model_1"></td>
                            <td><input type="text" class="purchase-input" name="net_sec_config_1"></td>
                            <td><input type="text" class="purchase-input" name="net_sec_govcode_1"></td>
                            <td>
                                <select class="purchase-input" name="net_sec_domestic_1" style="width:100%; height:34px; box-sizing:border-box;">
                                    <option value="是">是</option>
                                    <option value="否">否</option>
                                </select>
                            </td>
                            <td><input type="number" class="purchase-input text-right" name="net_sec_price_1" data-row="1" data-type="net_sec"></td>
                            <td><input type="text" class="quantity-input" name="net_sec_quantity_1" data-row="1" data-type="net_sec"></td>
                            <td><input type="text" class="purchase-input text-right" name="net_sec_amount_1" readonly></td>
                            <td><input type="text" class="purchase-input" name="net_sec_notes_1"></td>
                            <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="9" style="text-align: right;"><strong>小计：</strong></td>
                            <td><input type="text" class="purchase-input text-right" name="net_sec_subtotal" readonly></td>
                            <td colspan="2"></td>
                        </tr>
                        
                        <tr class="category-header">
                            <td colspan="11">服务器与存储设备</td>
                            <td>
                                <span class="btn-add" data-category="server" data-category-name="服务器与存储设备" title="添加"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td><input type="text" class="purchase-input" name="server_name_1"></td>
                            <td><input type="text" class="purchase-input" name="server_brand_1"></td>
                            <td><input type="text" class="purchase-input" name="server_model_1"></td>
                            <td><input type="text" class="purchase-input" name="server_config_1"></td>
                            <td><input type="text" class="purchase-input" name="server_govcode_1"></td>
                            <td>
                                <select class="purchase-input" name="server_domestic_1" style="width:100%; height:34px; box-sizing:border-box;">
                                    <option value="是">是</option>
                                    <option value="否">否</option>
                                </select>
                            </td>
                            <td><input type="number" class="purchase-input text-right" name="server_price_1" data-row="1" data-type="server"></td>
                            <td><input type="text" class="quantity-input" name="server_quantity_1" data-row="1" data-type="server"></td>
                            <td><input type="text" class="purchase-input text-right" name="server_amount_1" readonly></td>
                            <td><input type="text" class="purchase-input" name="server_notes_1"></td>
                            <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="9" style="text-align: right;"><strong>小计：</strong></td>
                            <td><input type="text" class="purchase-input text-right" name="server_subtotal" readonly></td>
                            <td colspan="2"></td>
                        </tr>
                        
                        <tr class="category-header">
                            <td colspan="11">终端设备</td>
                            <td>
                                <span class="btn-add" data-category="terminal" data-category-name="终端设备" title="添加"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td><input type="text" class="purchase-input" name="terminal_name_1"></td>
                            <td><input type="text" class="purchase-input" name="terminal_brand_1"></td>
                            <td><input type="text" class="purchase-input" name="terminal_model_1"></td>
                            <td><input type="text" class="purchase-input" name="terminal_config_1"></td>
                            <td><input type="text" class="purchase-input" name="terminal_govcode_1"></td>
                            <td>
                                <select class="purchase-input" name="terminal_domestic_1" style="width:100%; height:34px; box-sizing:border-box;">
                                    <option value="是">是</option>
                                    <option value="否">否</option>
                                </select>
                            </td>
                            <td><input type="number" class="purchase-input text-right" name="terminal_price_1" data-row="1" data-type="terminal"></td>
                            <td><input type="text" class="quantity-input" name="terminal_quantity_1" data-row="1" data-type="terminal"></td>
                            <td><input type="text" class="purchase-input text-right" name="terminal_amount_1" readonly></td>
                            <td><input type="text" class="purchase-input" name="terminal_notes_1"></td>
                            <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="9" style="text-align: right;"><strong>小计：</strong></td>
                            <td><input type="text" class="purchase-input text-right" name="terminal_subtotal" readonly></td>
                            <td colspan="2"></td>
                        </tr>
                        
                        <tr class="category-header">
                            <td colspan="11">专项设备</td>
                            <td>
                                <span class="btn-add" data-category="special" data-category-name="专项设备" title="添加"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td><input type="text" class="purchase-input" name="special_name_1"></td>
                            <td><input type="text" class="purchase-input" name="special_brand_1"></td>
                            <td><input type="text" class="purchase-input" name="special_model_1"></td>
                            <td><input type="text" class="purchase-input" name="special_config_1"></td>
                            <td><input type="text" class="purchase-input" name="special_govcode_1"></td>
                            <td>
                                <select class="purchase-input" name="special_domestic_1" style="width:100%; height:34px; box-sizing:border-box;">
                                    <option value="是">是</option>
                                    <option value="否">否</option>
                                </select>
                            </td>
                            <td><input type="number" class="purchase-input text-right" name="special_price_1" data-row="1" data-type="special"></td>
                            <td><input type="text" class="quantity-input" name="special_quantity_1" data-row="1" data-type="special"></td>
                            <td><input type="text" class="purchase-input text-right" name="special_amount_1" readonly></td>
                            <td><input type="text" class="purchase-input" name="special_notes_1"></td>
                            <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="9" style="text-align: right;"><strong>小计：</strong></td>
                            <td><input type="text" class="purchase-input text-right" name="special_subtotal" readonly></td>
                            <td colspan="2"></td>
                        </tr>
                        
                        <tr class="category-header">
                            <td colspan="11">机房配套设备</td>
                            <td>
                                <span class="btn-add" data-category="datacenter" data-category-name="机房配套设备" title="添加"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td><input type="text" class="purchase-input" name="datacenter_name_1"></td>
                            <td><input type="text" class="purchase-input" name="datacenter_brand_1"></td>
                            <td><input type="text" class="purchase-input" name="datacenter_model_1"></td>
                            <td><input type="text" class="purchase-input" name="datacenter_config_1"></td>
                            <td><input type="text" class="purchase-input" name="datacenter_govcode_1"></td>
                            <td>
                                <select class="purchase-input" name="datacenter_domestic_1" style="width:100%; height:34px; box-sizing:border-box;">
                                    <option value="是">是</option>
                                    <option value="否">否</option>
                                </select>
                            </td>
                            <td><input type="number" class="purchase-input text-right" name="datacenter_price_1" data-row="1" data-type="datacenter"></td>
                            <td><input type="text" class="quantity-input" name="datacenter_quantity_1" data-row="1" data-type="datacenter"></td>
                            <td><input type="text" class="purchase-input text-right" name="datacenter_amount_1" readonly></td>
                            <td><input type="text" class="purchase-input" name="datacenter_notes_1"></td>
                            <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="9" style="text-align: right;"><strong>小计：</strong></td>
                            <td><input type="text" class="purchase-input text-right" name="datacenter_subtotal" readonly></td>
                            <td colspan="2"></td>
                        </tr>
                        
                        <tr class="category-header">
                            <td colspan="11">基础软件</td>
                            <td>
                                <span class="btn-add" data-category="basic_sw" data-category-name="基础软件" title="添加"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td><input type="text" class="purchase-input" name="basic_sw_name_1"></td>
                            <td><input type="text" class="purchase-input" name="basic_sw_brand_1"></td>
                            <td><input type="text" class="purchase-input" name="basic_sw_model_1"></td>
                            <td><input type="text" class="purchase-input" name="basic_sw_config_1"></td>
                            <td><input type="text" class="purchase-input" name="basic_sw_govcode_1"></td>
                            <td>
                                <select class="purchase-input" name="basic_sw_domestic_1" style="width:100%; height:34px; box-sizing:border-box;">
                                    <option value="是">是</option>
                                    <option value="否">否</option>
                                </select>
                            </td>
                            <td><input type="number" class="purchase-input text-right" name="basic_sw_price_1" data-row="1" data-type="basic_sw"></td>
                            <td><input type="text" class="quantity-input" name="basic_sw_quantity_1" data-row="1" data-type="basic_sw"></td>
                            <td><input type="text" class="purchase-input text-right" name="basic_sw_amount_1" readonly></td>
                            <td><input type="text" class="purchase-input" name="basic_sw_notes_1"></td>
                            <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="9" style="text-align: right;"><strong>小计：</strong></td>
                            <td><input type="text" class="purchase-input text-right" name="basic_sw_subtotal" readonly></td>
                            <td colspan="2"></td>
                        </tr>
                        
                        <tr class="category-header">
                            <td colspan="11">应用软件</td>
                            <td>
                                <span class="btn-add" data-category="app_sw" data-category-name="应用软件" title="添加"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td><input type="text" class="purchase-input" name="app_sw_name_1"></td>
                            <td><input type="text" class="purchase-input" name="app_sw_brand_1"></td>
                            <td><input type="text" class="purchase-input" name="app_sw_model_1"></td>
                            <td><input type="text" class="purchase-input" name="app_sw_config_1"></td>
                            <td><input type="text" class="purchase-input" name="app_sw_govcode_1"></td>
                            <td>
                                <select class="purchase-input" name="app_sw_domestic_1" style="width:100%; height:34px; box-sizing:border-box;">
                                    <option value="是">是</option>
                                    <option value="否">否</option>
                                </select>
                            </td>
                            <td><input type="number" class="purchase-input text-right" name="app_sw_price_1" data-row="1" data-type="app_sw"></td>
                            <td><input type="text" class="quantity-input" name="app_sw_quantity_1" data-row="1" data-type="app_sw"></td>
                            <td><input type="text" class="purchase-input text-right" name="app_sw_amount_1" readonly></td>
                            <td><input type="text" class="purchase-input" name="app_sw_notes_1"></td>
                            <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="9" style="text-align: right;"><strong>小计：</strong></td>
                            <td><input type="text" class="purchase-input text-right" name="app_sw_subtotal" readonly></td>
                            <td colspan="2"></td>
                        </tr>
                        
                        <tr class="category-header">
                            <td colspan="11">安全软件及数字证书</td>
                            <td>
                                <span class="btn-add" data-category="sec_sw" data-category-name="安全软件及数字证书" title="添加"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td><input type="text" class="purchase-input" name="sec_sw_name_1"></td>
                            <td><input type="text" class="purchase-input" name="sec_sw_brand_1"></td>
                            <td><input type="text" class="purchase-input" name="sec_sw_model_1"></td>
                            <td><input type="text" class="purchase-input" name="sec_sw_config_1"></td>
                            <td><input type="text" class="purchase-input" name="sec_sw_govcode_1"></td>
                            <td>
                                <select class="purchase-input" name="sec_sw_domestic_1" style="width:100%; height:34px; box-sizing:border-box;">
                                    <option value="是">是</option>
                                    <option value="否">否</option>
                                </select>
                            </td>
                            <td><input type="number" class="purchase-input text-right" name="sec_sw_price_1" data-row="1" data-type="sec_sw"></td>
                            <td><input type="text" class="quantity-input" name="sec_sw_quantity_1" data-row="1" data-type="sec_sw"></td>
                            <td><input type="text" class="purchase-input text-right" name="sec_sw_amount_1" readonly></td>
                            <td><input type="text" class="purchase-input" name="sec_sw_notes_1"></td>
                            <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="9" style="text-align: right;"><strong>小计：</strong></td>
                            <td><input type="text" class="purchase-input text-right" name="sec_sw_subtotal" readonly></td>
                            <td colspan="2"></td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- 总计行 -->
                <div style="margin-top: 30px; margin-bottom: 15px; display: flex; justify-content: flex-end; align-items: center;">
                    <span style="font-weight: bold; margin-right: 10px;">产品购置总计(万元)：</span>
                    <input type="text" style="width: 150px; text-align: right; font-weight: bold;" class="purchase-input" name="total_amount" readonly>
                </div>
                


                <div class="form-actions">
                    <button type="button" class="btn btn-default" id="prevBtn">
                        <i class="fas fa-arrow-left"></i> 上一步
                    </button>
                    <button type="button" class="btn btn-default" id="saveBtn">
                        <i class="fas fa-save"></i> 保存
                    </button>
                    <button type="button" class="btn btn-primary" id="nextBtn">
                        下一步 <i class="fas fa-arrow-right"></i>
                    </button>
                    <button type="button" class="btn btn-primary" id="submitBtn" disabled>
                        确认提交审核
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div id="previewModal" class="modal-overlay">
        <div class="modal-content">
            <div class="modal-header">
                <h2>产品购置明细表预览</h2>
                <button class="modal-close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <!-- 预览表格将由JavaScript动态插入 -->
            </div>
        </div>
    </div>

    <script>
        // 自定义提示框
        function showCustomAlert(message) {
            // 检查是否已存在提示框
            let alertBox = document.getElementById('customAlertBox');
            
            if (!alertBox) {
                // 创建提示框
                alertBox = document.createElement('div');
                alertBox.id = 'customAlertBox';
                alertBox.style.position = 'fixed';
                alertBox.style.top = '50%';
                alertBox.style.left = '50%';
                alertBox.style.transform = 'translate(-50%, -50%)';
                alertBox.style.backgroundColor = 'white';
                alertBox.style.padding = '20px';
                alertBox.style.borderRadius = '8px';
                alertBox.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
                alertBox.style.zIndex = '2000';
                alertBox.style.minWidth = '300px';
                alertBox.style.textAlign = 'center';
                alertBox.style.animation = 'fadeIn 0.3s';
                
                // 添加动画样式
                const style = document.createElement('style');
                style.textContent = `
                    @keyframes fadeIn {
                        from { opacity: 0; transform: translate(-50%, -60%); }
                        to { opacity: 1; transform: translate(-50%, -50%); }
                    }
                `;
                document.head.appendChild(style);
                
                // 创建遮罩层
                const overlay = document.createElement('div');
                overlay.style.position = 'fixed';
                overlay.style.top = '0';
                overlay.style.left = '0';
                overlay.style.width = '100%';
                overlay.style.height = '100%';
                overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                overlay.style.zIndex = '1999';
                document.body.appendChild(overlay);
                
                // 不添加标题，直接显示消息
                
                // 创建消息容器
                const messageDiv = document.createElement('div');
                messageDiv.textContent = message;
                messageDiv.style.margin = '15px 0';
                messageDiv.style.fontSize = '16px';
                messageDiv.style.color = '#333';
                alertBox.appendChild(messageDiv);
                
                // 创建确定按钮
                const confirmBtn = document.createElement('button');
                confirmBtn.textContent = '确定';
                confirmBtn.style.backgroundColor = '#4e7bef';
                confirmBtn.style.color = 'white';
                confirmBtn.style.border = 'none';
                confirmBtn.style.padding = '8px 40px';
                confirmBtn.style.borderRadius = '4px';
                confirmBtn.style.fontSize = '14px';
                confirmBtn.style.cursor = 'pointer';
                confirmBtn.style.transition = 'background-color 0.3s';
                
                confirmBtn.onmouseover = function() {
                    this.style.backgroundColor = '#3d6ae8';
                };
                
                confirmBtn.onmouseout = function() {
                    this.style.backgroundColor = '#4e7bef';
                };
                
                confirmBtn.onclick = function() {
                    document.body.removeChild(alertBox);
                    document.body.removeChild(overlay);
                };
                
                alertBox.appendChild(confirmBtn);
                document.body.appendChild(alertBox);
            } else {
                // 更新已存在提示框的消息
                alertBox.querySelector('div:nth-child(1)').textContent = message;
            }
        }
        
        // 验证数量是否为正整数
        function validateQuantity(input) {
            const value = input.value;
            // 检查是否为正整数
            if (value !== '' && (!/^\d+$/.test(value) || parseInt(value) <= 0)) {
                showCustomAlert('数量必须是正整数！');
                input.value = ''; // 清空无效输入
                return false;
            }
            return true;
        }
        
        // 计算行金额
        function calculateRowAmount(row, type) {
            const quantityInput = document.querySelector(`input[name="${type}_quantity_${row}"]`);
            
            // 验证数量是否为正整数
            if (quantityInput && !validateQuantity(quantityInput)) {
                const amountInput = document.querySelector(`input[name="${type}_amount_${row}"]`);
                if (amountInput) {
                    amountInput.value = "0.00";
                }
                calculateSubtotal(type);
                return;
            }
            
            const quantity = parseInt(quantityInput?.value || 0);
            const price = parseFloat(document.querySelector(`input[name="${type}_price_${row}"]`)?.value || 0);
            const amount = quantity * price;
            
            // 设置行金额
            const amountInput = document.querySelector(`input[name="${type}_amount_${row}"]`);
            if(amountInput) {
                amountInput.value = isNaN(amount) ? '' : amount.toFixed(2);
            }
            
            // 计算该类别小计
            calculateSubtotal(type);
        }
        
        // 计算小计
        function calculateSubtotal(type) {
            const amountInputs = document.querySelectorAll(`input[name^="${type}_amount_"]`);
            let subtotal = 0;
            
            amountInputs.forEach(input => {
                if(input.name !== `${type}_subtotal`) {
                    subtotal += parseFloat(input.value || 0);
                }
            });
            
            // 设置小计
            const subtotalInput = document.querySelector(`input[name="${type}_subtotal"]`);
            if(subtotalInput) {
                subtotalInput.value = isNaN(subtotal) ? '' : subtotal.toFixed(2);
            }
            
            // 计算总计
            calculateTotal();
        }
        
        // 计算总计
        function calculateTotal() {
            const subtotals = [
                parseFloat(document.querySelector('input[name="net_sec_subtotal"]')?.value || 0),
                parseFloat(document.querySelector('input[name="server_subtotal"]')?.value || 0),
                parseFloat(document.querySelector('input[name="terminal_subtotal"]')?.value || 0),
                parseFloat(document.querySelector('input[name="special_subtotal"]')?.value || 0),
                parseFloat(document.querySelector('input[name="datacenter_subtotal"]')?.value || 0),
                parseFloat(document.querySelector('input[name="basic_sw_subtotal"]')?.value || 0),
                parseFloat(document.querySelector('input[name="app_sw_subtotal"]')?.value || 0),
                parseFloat(document.querySelector('input[name="sec_sw_subtotal"]')?.value || 0)
            ];
            
            const total = subtotals.reduce((sum, val) => sum + (isNaN(val) ? 0 : val), 0);
            document.querySelector('input[name="total_amount"]').value = total.toFixed(2);
        }
        
        // 检查提交按钮状态
        function checkSubmitButtonStatus() {
            // 从localStorage获取所有页面的完成状态
            const basicInfoCompleted = localStorage.getItem('basicInfoCompleted') === 'true';
            const budgetCompleted = localStorage.getItem('budgetCompleted') === 'true';
            const productCompleted = localStorage.getItem('productCompleted') === 'true';
            const softwareCompleted = localStorage.getItem('softwareCompleted') === 'true';
            const implementationCompleted = localStorage.getItem('implementationCompleted') === 'true';
            const cloudCompleted = localStorage.getItem('cloudCompleted') === 'true';
            
            // 只有当所有页面都完成时，才启用提交按钮
            const allCompleted = basicInfoCompleted && budgetCompleted && productCompleted && 
                                softwareCompleted && implementationCompleted && cloudCompleted;
            
            document.getElementById('submitBtn').disabled = !allCompleted;
            
            if (allCompleted) {
                document.getElementById('submitBtn').style.opacity = '1';
            } else {
                document.getElementById('submitBtn').style.opacity = '0.6';
            }
        }
        
        // 初始化事件监听
        document.addEventListener('DOMContentLoaded', function() {
            // 检查XLSX库是否正确加载
            if (typeof XLSX === 'undefined') {
                console.error('XLSX库未正确加载，导出功能可能不可用');
                document.getElementById('exportBtn').disabled = true;
                document.getElementById('exportBtn').title = 'XLSX库未加载，导出功能不可用';
            }
            
            // 为所有数量和单价输入添加事件监听
            document.querySelectorAll('input[data-row][data-type]').forEach(input => {
                input.addEventListener('input', function() {
                    const row = this.getAttribute('data-row');
                    const type = this.getAttribute('data-type');
                    calculateRowAmount(row, type);
                });
            });
            
            // 删除行按钮事件
            document.addEventListener('click', function(event) {
                if(event.target.classList.contains('btn-delete')) {
                    const row = event.target.closest('tr');
                    const inputs = row.querySelectorAll('input[data-type]');
                    if(inputs.length > 0) {
                        const type = inputs[0].getAttribute('data-type');
                        row.remove();
                        
                        // 重新计算序号
                        updateRowNumbers(type);
                        
                        calculateSubtotal(type);
                    }
                }
            });
            
            // 更新行序号
            function updateRowNumbers(type) {
                const rows = document.querySelectorAll(`input[name^="${type}_name_"]`);
                rows.forEach((input, index) => {
                    const rowNumber = index + 1;
                    const row = input.closest('tr');
                    const numberCell = row.cells[0];
                    numberCell.textContent = rowNumber;
                    
                    // 更新该行所有输入的name和data-row属性
                    row.querySelectorAll(`input[name^="${type}_"]`).forEach(input => {
                        const nameParts = input.name.split('_');
                        const lastPart = nameParts.pop();
                        if(!isNaN(lastPart)) {
                            input.name = `${type}_${nameParts.pop()}_${rowNumber}`;
                            if(input.hasAttribute('data-row')) {
                                input.setAttribute('data-row', rowNumber);
                            }
                        }
                    });
                    
                    // 更新select元素
                    row.querySelectorAll(`select[name^="${type}_"]`).forEach(select => {
                        const nameParts = select.name.split('_');
                        const lastPart = nameParts.pop();
                        if(!isNaN(lastPart)) {
                            select.name = `${type}_${nameParts.pop()}_${rowNumber}`;
                        }
                    });
                });
            }
            
            // 添加每个类别的添加行按钮事件
            document.addEventListener('click', function(event) {
                const addBtn = event.target.closest('.btn-add');
                if(addBtn) {
                    const categoryType = addBtn.dataset.category;
                    const categoryName = addBtn.dataset.categoryName;
                    addNewRowToCategory(categoryType, categoryName);
                }
            });
            
            // 通用添加行函数
            function addNewRowToCategory(categoryType, categoryName) {
                // 找到对应类别的最后一行
                const rows = document.querySelectorAll(`input[name^="${categoryType}_name_"]`);
                const lastRowNum = rows.length;
                const newRowNum = lastRowNum + 1;
                
                // 创建新行
                const newRow = document.createElement('tr');
                newRow.innerHTML = `
                    <td>${newRowNum}</td>
                    <td><input type="text" class="purchase-input" name="${categoryType}_name_${newRowNum}"></td>
                    <td><input type="text" class="purchase-input" name="${categoryType}_brand_${newRowNum}"></td>
                    <td><input type="text" class="purchase-input" name="${categoryType}_model_${newRowNum}"></td>
                    <td><input type="text" class="purchase-input" name="${categoryType}_config_${newRowNum}"></td>
                    <td><input type="text" class="purchase-input" name="${categoryType}_govcode_${newRowNum}"></td>
                    <td>
                        <select class="purchase-input" name="${categoryType}_domestic_${newRowNum}" style="width:100%; height:34px; box-sizing:border-box;">
                            <option value="是">是</option>
                            <option value="否">否</option>
                        </select>
                    </td>
                    <td><input type="number" class="purchase-input text-right" name="${categoryType}_price_${newRowNum}" data-row="${newRowNum}" data-type="${categoryType}"></td>
                    <td><input type="text" class="quantity-input" name="${categoryType}_quantity_${newRowNum}" data-row="${newRowNum}" data-type="${categoryType}"></td>
                    <td><input type="text" class="purchase-input text-right" name="${categoryType}_amount_${newRowNum}" readonly></td>
                    <td><input type="text" class="purchase-input" name="${categoryType}_notes_${newRowNum}"></td>
                    <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                `;
                
                // 找到该类别的小计行
                const subtotalRow = document.querySelector(`input[name="${categoryType}_subtotal"]`).closest('tr');
                
                // 在小计行之前插入新行
                subtotalRow.parentNode.insertBefore(newRow, subtotalRow);
                
                // 为新行的数量和单价输入添加事件监听
                newRow.querySelectorAll('input[data-row][data-type]').forEach(input => {
                    input.addEventListener('input', function() {
                        const row = this.getAttribute('data-row');
                        const type = this.getAttribute('data-type');
                        calculateRowAmount(row, type);
                    });
                });
                
                // 更新该类别的小计
                calculateSubtotal(categoryType);
            }
            
            // 保存按钮事件
            document.getElementById('saveBtn').addEventListener('click', function() {
                // 标记当前页面已完成
                localStorage.setItem('productCompleted', 'true');
                
                // 检查提交按钮状态
                checkSubmitButtonStatus();
                
                showCustomAlert('产品购置明细已保存');
            });
            
            // 上一步按钮事件
            document.getElementById('prevBtn').addEventListener('click', function() {
                window.location.href = 'project-budget.html';
            });
            
            // 下一步按钮事件
            document.getElementById('nextBtn').addEventListener('click', function() {
                // 标记当前页面已完成
                localStorage.setItem('productCompleted', 'true');
                
                // 检查提交按钮状态
                checkSubmitButtonStatus();
                
                window.location.href = 'software-dev.html';
            });
            
            // 提交按钮功能
            document.getElementById('submitBtn').addEventListener('click', function() {
                if (!this.disabled) {
                    showCustomConfirm('确认提交项目申报审核吗？提交后将不能再修改。', function(confirmed) {
                        if (confirmed) {
                            showCustomAlert('项目申报已提交审核，请等待审核结果。');
                            setTimeout(function() {
                                window.location.href = '../project-submit.html';
                            }, 1500);
                        }
                    });
                }
            });
            
            // "该表不适用于本项目"复选框事件
            const notApplicableCheckbox = document.getElementById('notApplicable');
            if (notApplicableCheckbox) {
                notApplicableCheckbox.addEventListener('change', function() {
                const inputs = document.querySelectorAll('.purchase-input:not([readonly])');
                const deleteButtons = document.querySelectorAll('.btn-delete');
                const addButtons = document.querySelectorAll('.btn-add, #addCategoryBtn');
                
                if (this.checked) {
                    inputs.forEach(input => {
                        input.disabled = true;
                        input.style.backgroundColor = '#f5f5f5';
                    });
                    deleteButtons.forEach(btn => btn.disabled = true);
                    addButtons.forEach(btn => btn.disabled = true);
                } else {
                    inputs.forEach(input => {
                        input.disabled = false;
                        input.style.backgroundColor = '';
                    });
                    deleteButtons.forEach(btn => btn.disabled = false);
                    addButtons.forEach(btn => btn.disabled = false);
                    }
                });
            }
            
            // 预览按钮事件
            document.getElementById('previewBtn').addEventListener('click', function() {
                showPreview();
            });
            
            // 导出按钮事件
            document.getElementById('exportBtn').addEventListener('click', function() {
                exportToExcel();
            });
            
            // 关闭模态框按钮事件
            document.querySelector('.modal-close-btn').addEventListener('click', function() {
                document.getElementById('previewModal').style.display = 'none';
            });
            
            // 点击模态框背景关闭模态框
            document.getElementById('previewModal').addEventListener('click', function(event) {
                if (event.target === this) {
                    this.style.display = 'none';
                }
            });
            
            // 初始化计算
            calculateTotal();
            
            // 检查提交按钮状态
            checkSubmitButtonStatus();
        });

        // 显示预览
        function showPreview() {
            try {
                const modalBody = document.querySelector('#previewModal .modal-body');
                if (!modalBody) {
                    console.error('预览模态框不存在');
                    alert('预览功能不可用');
                    return;
                }
                
                let tableHTML = `<table class="preview-table">
                    <thead>
                        <tr>
                            <th style="width: 5%; text-align: center;">序号</th>
                            <th style="width: 13%; text-align: center;">产品名称</th>
                            <th style="width: 8%; text-align: center;">参考品牌</th>
                            <th style="width: 8%; text-align: center;">参考型号</th>
                            <th style="width: 10%; text-align: center;">配置要求</th>
                            <th style="width: 8%; text-align: center;">政府采购编号</th>
                            <th style="width: 10%; text-align: center;">是否国产</th>
                            <th style="width: 7%; text-align: center;">单价(万元)</th>
                            <th style="width: 8%; text-align: center;">数量</th>
                            <th style="width: 7%; text-align: center;">总计(万元)</th>
                            <th style="width: 8%; text-align: center;">备注</th>
                        </tr>
                    </thead>
                    <tbody>`;
            
                // 获取所有类别
                const categories = ['net_sec', 'server', 'terminal', 'special', 'datacenter', 'basic_sw', 'app_sw', 'sec_sw'];
                const categoryNames = ['网络与安全硬件购置费', '服务器与存储设备', '终端设备', '专项设备', '机房配套设备', '基础软件', '应用软件', '安全软件及数字证书'];
                
                // 遍历每个类别
                categories.forEach((category, categoryIndex) => {
                    // 添加类别标题行
                    tableHTML += `<tr class="category-header">
                        <td colspan="11" style="text-align: center;">${categoryNames[categoryIndex]}</td>
                    </tr>`;
                    
                    // 获取该类别下的所有产品行
                    const rows = document.querySelectorAll(`input[name^="${category}_name_"]`);
                    
                    rows.forEach((input, index) => {
                        const rowNumber = index + 1;
                        const row = input.closest('tr');
                        
                        // 获取单元格输入值
                        const productName = input.value || '';
                        const brand = row.querySelector(`input[name="${category}_brand_${rowNumber}"]`)?.value || '';
                        const model = row.querySelector(`input[name="${category}_model_${rowNumber}"]`)?.value || '';
                        const config = row.querySelector(`input[name="${category}_config_${rowNumber}"]`)?.value || '';
                        const govcode = row.querySelector(`input[name="${category}_govcode_${rowNumber}"]`)?.value || '';
                        const domestic = row.querySelector(`select[name="${category}_domestic_${rowNumber}"]`)?.value || '是';
                        const price = row.querySelector(`input[name="${category}_price_${rowNumber}"]`)?.value || '0.00';
                        const quantity = row.querySelector(`input[name="${category}_quantity_${rowNumber}"]`)?.value || '0';
                        const amount = row.querySelector(`input[name="${category}_amount_${rowNumber}"]`)?.value || '0.00';
                        const notes = row.querySelector(`input[name="${category}_notes_${rowNumber}"]`)?.value || '';
                        
                        // 添加产品行到预览
                        tableHTML += `<tr>
                            <td style="text-align: center;">${rowNumber}</td>
                            <td style="text-align: center;">${productName}</td>
                            <td style="text-align: center;">${brand}</td>
                            <td style="text-align: center;">${model}</td>
                            <td style="text-align: center;">${config}</td>
                            <td style="text-align: center;">${govcode}</td>
                            <td style="text-align: center;">${domestic}</td>
                            <td style="text-align: center;">${price}</td>
                            <td style="text-align: center;">${quantity}</td>
                            <td style="text-align: center;">${amount}</td>
                            <td style="text-align: center;">${notes}</td>
                        </tr>`;
                    });
                    
                    // 添加小计行
                    const subtotal = document.querySelector(`input[name="${category}_subtotal"]`)?.value || '0.00';
                    tableHTML += `<tr>
                        <td colspan="9" style="text-align: right;"><strong>小计：</strong></td>
                        <td style="text-align: center;">${subtotal}</td>
                        <td></td>
                    </tr>`;
                });
                
                // 添加总计行
                const total = document.querySelector('input[name="total_amount"]')?.value || '0.00';
                tableHTML += `<tr style="background-color: #f0f5ff; font-weight: bold;">
                    <td colspan="9" style="text-align: right;">产品购置总计(万元)：</td>
                    <td style="text-align: center;">${total}</td>
                    <td></td>
                </tr>`;
                
                tableHTML += `</tbody></table>`;
                modalBody.innerHTML = tableHTML;
                document.getElementById('previewModal').style.display = 'flex';
            } catch (error) {
                console.error('预览功能出错:', error);
                alert('预览功能不可用');
            }
        }
        
        // 导出到Excel
        function exportToExcel() {
            try {
                if (typeof XLSX === 'undefined') {
                    console.error('XLSX库未正确加载，导出功能不可用');
                    alert('导出功能不可用，请确保XLSX库已正确加载');
                    return;
                }
                
                // 创建数据数组
                const data = [];
                // 添加表头
                data.push([
                    '序号', '产品名称', '参考品牌', '参考型号', '配置要求', '政府采购编号', 
                    '是否国产', '单价(万元)', '数量', '总计(万元)', '备注'
                ]);
                
                // 获取所有类别
                const categories = ['net_sec', 'server', 'terminal', 'special', 'datacenter', 'basic_sw', 'app_sw', 'sec_sw'];
                const categoryNames = ['网络与安全硬件购置费', '服务器与存储设备', '终端设备', '专项设备', '机房配套设备', '基础软件', '应用软件', '安全软件及数字证书'];
                
                // 遍历每个类别
                categories.forEach((category, categoryIndex) => {
                    // 添加类别标题行
                    data.push([categoryNames[categoryIndex], '', '', '', '', '', '', '', '', '', '']);
                    
                    // 获取该类别下的所有产品行
                    const rows = document.querySelectorAll(`input[name^="${category}_name_"]`);
                    
                    rows.forEach((input, index) => {
                        const rowNumber = index + 1;
                        const row = input.closest('tr');
                        
                        // 获取单元格输入值
                        const productName = input.value || '';
                        const brand = row.querySelector(`input[name="${category}_brand_${rowNumber}"]`)?.value || '';
                        const model = row.querySelector(`input[name="${category}_model_${rowNumber}"]`)?.value || '';
                        const config = row.querySelector(`input[name="${category}_config_${rowNumber}"]`)?.value || '';
                        const govcode = row.querySelector(`input[name="${category}_govcode_${rowNumber}"]`)?.value || '';
                        const domestic = row.querySelector(`select[name="${category}_domestic_${rowNumber}"]`)?.value || '是';
                        const price = parseFloat(row.querySelector(`input[name="${category}_price_${rowNumber}"]`)?.value || '0');
                        const quantity = parseFloat(row.querySelector(`input[name="${category}_quantity_${rowNumber}"]`)?.value || '0');
                        const amount = parseFloat(row.querySelector(`input[name="${category}_amount_${rowNumber}"]`)?.value || '0');
                        const notes = row.querySelector(`input[name="${category}_notes_${rowNumber}"]`)?.value || '';
                        
                        // 添加产品行到数据
                        data.push([
                            rowNumber, productName, brand, model, config, govcode, 
                            domestic, price, quantity, amount, notes
                        ]);
                    });
                    
                    // 添加小计行
                    const subtotal = parseFloat(document.querySelector(`input[name="${category}_subtotal"]`)?.value || '0');
                    data.push(['', '', '', '', '', '', '', '', '小计:', subtotal, '']);
                    
                    // 添加空行
                    data.push(['', '', '', '', '', '', '', '', '', '', '']);
                });
                
                // 添加总计行
                const total = parseFloat(document.querySelector('input[name="total_amount"]')?.value || '0');
                data.push(['', '', '', '', '', '', '', '', '产品购置总计:', total, '']);
                
                // 创建工作表
                const worksheet = XLSX.utils.aoa_to_sheet(data);
                
                // 设置列宽
                worksheet['!cols'] = [
                    { wch: 5 }, { wch: 15 }, { wch: 10 }, { wch: 10 }, { wch: 15 }, 
                    { wch: 12 }, { wch: 8 }, { wch: 10 }, { wch: 8 }, { wch: 12 }, { wch: 15 }
                ];
                
                // 设置数字格式
                for (let i = 1; i < data.length; i++) {
                    const priceCell = 'H' + (i + 1);
                    const quantityCell = 'I' + (i + 1);
                    const totalCell = 'J' + (i + 1);
                    
                    if (worksheet[priceCell] && worksheet[priceCell].t === 'n') {
                        worksheet[priceCell].z = '#,##0.00';
                    }
                    
                    if (worksheet[quantityCell] && worksheet[quantityCell].t === 'n') {
                        worksheet[quantityCell].z = '#,##0';
                    }
                    
                    if (worksheet[totalCell] && worksheet[totalCell].t === 'n') {
                        worksheet[totalCell].z = '#,##0.00';
                    }
                }
                
                // 创建工作簿并添加工作表
                const workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(workbook, worksheet, '产品购置明细');
                
                // 下载Excel文件
                XLSX.writeFile(workbook, '产品购置明细.xlsx');
            } catch (error) {
                console.error('导出功能出错:', error);
                alert('导出功能不可用');
            }
        }
    </script>
</body>
</html> 